<script setup>
import { getCompanyProfileVoByIdUsingGet } from "@/api/companyProfileController";
import { onMounted, ref } from "vue";

const images = [
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp",
];
const idid = {
  id: "1826185926116610050",
};
const text = ref("");
const getCompanyProfileVoByIdUsingGetData = async () => {
  const res = await getCompanyProfileVoByIdUsingGet(idid.id);
  if (res.data.code === 0) {
    text.value = res.data.content;
  }
};
onMounted(() => {
  getCompanyProfileVoByIdUsingGetData();
});
</script>

<template>
  <a-layout style="height: 400px">
    <a-layout-header>
      <div class="head">
        <a-carousel
          :autoPlay="true"
          animation-name="card"
          show-arrow="never"
          indicator-position="outer"
          :style="{
            width: '100%',
            height: '240px',
          }"
        >
          <a-carousel-item
            :auto-play="true"
            v-for="image in images"
            :key="image"
            :style="{ width: '60%' }"
          >
            <img
              :src="image"
              :style="{
                width: '100%',
              }"
            />
          </a-carousel-item>
        </a-carousel>
      </div>
    </a-layout-header>
    <a-layout-content>
      <div class="hh">
        <h1>技术行业领先</h1>
      </div>
      <a-card :style="{ width: '360px' }" title="xxxxxxx"> {{ text }} </a-card>
    </a-layout-content>
  </a-layout>
</template>

<style scoped>
.head {
  width: 100%;
  height: 300px;
}
.hh {
  width: 500px;
  margin: 0 auto;
}
.hh h1 {
  color: #7f7f7f;
}
</style>
